import React, { Suspense } from 'react';
// Suspense 结合lazy实现按需加载，懒加载：fallback：加载中的效果
import { Route } from 'react-router';
import { Skeleton } from 'antd';
// Skeleton 组件中的骨架屏
import { ProjectRouteProps } from '~/config/routes';

export const ProjectRoute = (props: ProjectRouteProps) => {
  const { component, name, ...rest } = props;
  console.log(component)
  console.log(rest)
  if (props.name) {
    window.document.title = props.name;
  }

  const Component = React.lazy(async () => {
    let c = await component();
    console.log('c')
    console.log(c)
    if ('default' in c) {
      c = c.default;
    }
    return { default: c };
  });

  return (
    <Route {...rest}>
      <Suspense
        fallback={
          <Skeleton active />
        }>
        <Component />
      </Suspense>
    </Route>
  );
};
